<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>桃饱网</title>
    <link rel="shortcut icon" href="pic/favicon .ico">
    <link rel="stylesheet" href="mycss.css">
    <script src="vue.js"></script>
</head>

<body>
    <div id='all'>
        <div id='main' v-if='mystate=="mn"'>
            <!-- 头部界面，登录或注册 -->
            <header>
                <div id='nonLogin' v-if='!log'>
                    <button @click='login'>登陆</button>
                    <button @click='regist'>注册</button>
                </div>
                <div id="isLogin" v-if='log'>
                    <span>欢迎用户 <b>{{account}}</b> 浏览本网站</span>
                    <button @click='logout'>登出</button>
                </div>
            </header>
            <section>
                <div id='select'>
                    <!-- 页面功能选择 -->
                    <div class='pla' v-for='e,i in plate' @click='chang(i)'>
                        {{e}}
                    </div>
                </div>
                <div id="content">
                    <!-- 所有商品的页面 -->
                    <div class='page' id='gds' v-show='secpage=="gds"'>
                        <div class='good' v-for='g,p in goods'>
                            <div class="gname">商品:{{p}}</div>
                            <div class="gprice">价格:{{g.price}} rmb</div>
                            <div class="addsc" v-show='career=="cus"' @click='tocar(p,g.price,g.owner)'>添加至购物车</div>
                        </div>
                    </div>
                    <!-- 销售的商品管理 -->
                    <div class='page' id='mng' v-show='secpage=="mng"'>

                        <div id='isncus' v-show='career!="sal"'><b>商品管理功能只开放给销售使用</b></div>
                        <div id='addg' v-show='career=="sal"&&!addgood'>
                            <button @click='startadd'>新增商品</button>
                        </div>
                        <div class='good' v-show='career=="sal"&&!addgood' v-for='e,k in mnglist'>
                            <div class="gname">商品:{{k}}</div>
                            <div class='justr'>价格: <input type="text" class='iprice' v-model.number='e.price'> rmb</div>
                            <div class="addsc" @click=' remg(k)'>移除商品</div>
                        </div>
                        <div id='toadd' v-show='career=="sal"&&addgood' class='messa'>
                            商品:<input type="text" id='getgname'>
                            <br><br>
                            价格:<input type="text" id='getprice'>
                            <br><br>
                            <button @click='sure_a'>确定</button>&nbsp;
                            <button @click='back_a'>取消</button>
                        </div>
                    </div>
                    <!-- 顾客的购物车 -->
                    <div class='page' id='spc' v-show='secpage=="spc"'>
                        <div class='cgoods' v-show='career=="cus"' v-for='g,p in shopcar[account]'>
                            <div class="cname">商品:{{p}}</div>
                            <div class='single'>单价:{{g.price}} rmb</div>
                            <button class='decre' @click='decrease(p)'>&lt;</button>
                            <input type="text" v-model.number='g.amount'>
                            <button class='incre' @click='increase(p)'>></button>
                            <a href="#" @click='remov(p)'>移出购物车</a>
                            <b>价格为:{{g.amount*g.price}} rmb</b>
                        </div>
                        <div id='isncus' v-show='career!="cus"'><b>购物车功能只开放给顾客使用</b></div>
                    </div>
                    <!-- 购物车的价钱总计 -->
                    <div id='calculator' v-show='secpage=="spc"&&career=="cus"'>
                        总计:{{calcu}} rmb
                        <button @click='clearspc'>结算付款</button>
                    </div>
                </div>
            </section>
        </div>
        <!-- 本部分为登陆环节 -->
        <div id='tologin' class='messa' v-if='mystate=="lg"'>
            账号:<input type="text" v-model='account'>
            <br><br>
            密码:<input type="text" v-model='password'>
            <br><br>
            <button @click='sure_l'>确定</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button @click='back_l'>返回主页
            </button>
        </div>
        <!-- 本部分为注册环节 -->
        <div id="reg" class='messa' v-if='mystate=="rg"'>
            账号:<input type="text" v-model='account'>
            <br><br>
            密码:<input type="text" v-model='password'>
            <br><br>
            用户类型: 顾客<input type="radio" name='rank' value='cus' @click='choose'>&nbsp;&nbsp;销售<input type="radio"
                name='rank' value="sal" @click='choose'>
            <br><br>
            邮箱: <input type='email' v-model='mail'>
            <br><br>
            <button @click='sure_r'>确定</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button @click='back_r'>返回主页
            </button>
        </div>
    </div>
    <script>
        var allPage = new Vue({
            el: '#all',
            data: {
                log: false,         //是否有用户登陆
                mystate: 'mn',      //页面状态(主页，登陆，注册)
                account: '',        //当前登录用户的账号
                password: '',       //当前登录用户的密码
                career: '',         //当前登录用户的类型
                mail: '',           //当前登录用户的邮箱
                users: {            //存放所有用户的信息
                    cus1: {
                        password: '123',
                        career: 'cus',
                        mail: '771282250@qq.com'
                    },
                    cus2: {
                        password: '456',
                        career: 'cus',
                        mail: '771282250@qq.com'
                    },
                    cus3: {
                        password: '789',
                        career: 'cus',
                        mail: '771282250@qq.com'
                    },
                    sal1: {
                        password: '123',
                        career: 'sal',
                        mail: '771282250@qq.com'
                    },
                    sal2: {
                        password: '456',
                        career: 'sal',
                        mail: '771282250@qq.com'
                    },
                    sal3: {
                        password: '789',
                        career: 'sal',
                        mail: '771282250@qq.com'
                    }
                },
                goods: {            //存放所有商品的信息
                    apple: {
                        price: 5,
                        owner: 'sal1'
                    },
                    pear: {
                        price: 4,
                        owner: 'sal1'
                    },
                    banana: {
                        price: 3,
                        owner: 'sal1'
                    },
                    papaya: {
                        price: 7,
                        owner: 'sal2'
                    },
                    mango: {
                        price: 8,
                        owner: 'sal2'
                    },
                    knife: {
                        price: 14,
                        owner: 'sal3'
                    },
                    spear: {
                        price: 21,
                        owner: 'sal3'
                    },
                    aumor: {
                        price: 205,
                        owner: 'sal3'
                    },
                    gun: {
                        price: 324,
                        owner: 'sal3'
                    },
                    cannon: {
                        price: 1453,
                        owner: 'sal3'
                    }
                },
                shopcar: {          //购物车信息

                },
                sails: {            //商品销售信息

                },
                plate: ['商品界面', '商品管理', '购物车'],            //内容页的三种类型
                secpage: 'gds',                                      //当前页面的属性
                addgood: false                                       //是否在新增商品
            },
            methods: {
                // 进入登陆界面
                login: function () {
                    this.mystate = 'lg';
                },
                // 进入注册界面
                regist() {
                    this.mystate = 'rg'
                },
                // 登陆事件的确认按键
                sure_l() {
                    if (this.account == '' || this.password == '') {
                        alert('账号或是密码为空，请输入完整');
                    }
                    else {
                        var flag = false;
                        for (var k in this.users) {
                            if (this.account == k && this.password == this.users[k].password) {
                                this.mail = this.users[k].mail;
                                this.career = this.users[k].career
                                flag = true;
                                break;
                            }
                        }
                        if (!flag) {
                            alert('账号或密码错误');
                        }
                        else {
                            if (!this.shopcar.hasOwnProperty(this.account)) {
                                Vue.set(this.shopcar, this.account, {})
                            }
                            this.log = true;
                            this.secpage = 'gds'
                            this.mystate = 'mn';
                        }
                    }
                },
                // 注册事件的确认按键
                sure_r() {
                    if (this.account == '' || this.password == '' || this.career == '' || this.mail == '') {
                        alert('信息输入不完全，请输入完整');
                    }
                    else {
                        Vue.set(this.users, this.account, {
                            password: this.password,
                            career: this.career,
                            mail: this.mail
                        })
                        this.account = '';
                        this.password = '';
                        this.career = '';
                        this.mail = '';
                        this.secpage = 'gds'
                        this.mystate = 'mn';
                    }
                },
                sure_a() {
                    var n = document.getElementById('getgname')
                    var p = document.getElementById('getprice');
                    var nv = n.value;
                    var pv = p.value;
                    console.log(nv, pv);
                    Vue.set(this.goods, nv, {
                        price: pv,
                        owner: this.account
                    });
                    n.value = '';
                    p.value = '';
                    this.addgood = false;
                },
                // 登出账号
                logout() {
                    if (this.addgood) {
                        alert('请完成新增操作后再进行此操作');
                        return;
                    }
                    this.account = '';
                    this.password = '';
                    this.career = '';
                    this.log = false;
                    this.mystate = 'mn';
                    this.secpage = 'gds'
                },
                // 在登录界面中返回主页
                back_l() {
                    this.account = '';
                    this.password = '';
                    this.secpage = 'gds'
                    this.mystate = 'mn';
                },
                back_a() {
                    var n = document.getElementById('getgname')
                    var p = document.getElementById('getprice');
                    var nv = n.value;
                    var pv = p.value;
                    n.value = '';
                    p.value = '';
                    this.addgood = false;
                },
                // 在注册界面中返回主页
                back_r() {
                    this.account = '';
                    this.password = '';
                    this.career = '';
                    this.secpage = 'gds'
                    this.mystate = 'mn';
                },
                // 在注册界面中选择用户类型
                choose() {
                    var tp = document.getElementsByName('rank');
                    if (tp[0].checked) {
                        this.career = tp[0].value;
                    }
                    else {
                        this.career = tp[1].value;
                    }
                },
                //改变内容页
                chang(e) {
                    if (this.addgood) {
                        alert('请完成新增操作后再进行此操作');
                        return;
                    }
                    if (e == 0) {
                        this.secpage = 'gds';
                    }
                    else if (e == 1) {
                        this.secpage = 'mng';
                    }
                    else {
                        this.secpage = 'spc';
                    }
                },
                //将商品加入到购物车
                tocar(k, p, o) {
                    if (!this.shopcar[this.account].hasOwnProperty(k)) {
                        Vue.set(this.shopcar[this.account], k, {
                            price: p,
                            owner: o,
                            amount: 1
                        })
                    }
                },
                //增加购物车商品的数量
                increase(k) {
                    this.shopcar[this.account][k].amount += 1;
                },
                //减少购物车商品的数量
                decrease(k) {
                    if (this.shopcar[this.account][k].amount == 1) { alert('商品数量不能为0，若想移除，请按移出购物车'); }
                    else { this.shopcar[this.account][k].amount -= 1; }
                },
                // 从购物车中移除商品
                remov(k) {
                    Vue.delete(this.shopcar[this.account], k);
                },
                // 清空购物车
                clearspc() {
                    this.shopcar[this.account] = {};
                },
                // 销售移除商品
                remg(k) {
                    Vue.delete(this.goods, k);
                },
                //新增商品
                startadd() {
                    this.addgood = true;
                }
            },
            computed: {
                // 计算购物车的总价
                calcu: function () {
                    if (this.career != 'cus' || this.shopcar[this.account] == {}) {
                        return '0';
                    }
                    else {
                        var ans = 0;
                        for (var idx in this.shopcar[this.account]) {
                            ans += (this.shopcar[this.account][idx].amount * this.shopcar[this.account][idx].price);
                        }
                        return ans;
                    }
                },
                //筛选出本销售所控制的商品
                mnglist: function () {
                    var ans = {};
                    for (var k in this.goods) {
                        if (this.goods[k]['owner'] == this.account) {
                            Vue.set(ans, k, this.goods[k]);
                        }
                    }
                    return ans;
                }
            }
        })
    </script>
</body>

</html>